<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>CustomDialog 简单示例</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 600px;
      margin: 0 auto;
      padding: 20px;
    }
    h1 {
      color: #333;
      text-align: center;
      margin-bottom: 30px;
    }
    .button-group {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 15px;
      margin-bottom: 30px;
    }
    button {
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.3s;
    }
    button:hover {
      opacity: 0.8;
    }
    .primary {
      background-color: #409eff;
      color: white;
    }
    .success {
      background-color: #67c23a;
      color: white;
    }
    .warning {
      background-color: #e6a23c;
      color: white;
    }
    .danger {
      background-color: #f56c6c;
      color: white;
    }
    .info {
      background-color: #909399;
      color: white;
    }
  </style>
  <!-- 引入自定义弹窗样式 -->
  <link rel="stylesheet" href="../resources/css/calling/component/custom-dialog.css">
</head>
<body>
  <h1>CustomDialog 简单示例</h1>
  
  <div class="button-group">
    <button class="primary" onclick="showAlert()">显示提示框</button>
    <button class="warning" onclick="showConfirm()">显示确认框</button>
  </div>
  
  <div class="button-group">
    <button class="success" onclick="showSuccess()">成功提示</button>
    <button class="danger" onclick="showError()">错误提示</button>
    <button class="info" onclick="showInfo()">信息提示</button>
    <button class="warning" onclick="showWarning()">警告提示</button>
  </div>
  
  <div class="button-group">
    <button class="primary" onclick="showAutoClose()">3秒后自动关闭</button>
  </div>

  <!-- 引入自定义弹窗脚本 -->
  <script src="../resources/js/custom-dialog.js"></script>
  <script>
    // 基础提示框
    function showAlert() {
      CustomDialog.alert({
        title: '提示',
        message: '这是一个基础提示框示例',
        confirmButtonText: '我知道了'
      });
    }
    
    // 确认框
    function showConfirm() {
      CustomDialog.confirm({
        title: '操作确认',
        message: '您确定要执行此操作吗？',
        confirmCallback: function() {
          CustomDialog.success('操作已确认！');
        },
        cancelCallback: function() {
          CustomDialog.info('操作已取消');
        }
      });
    }
    
    // 成功提示
    function showSuccess() {
      CustomDialog.success('操作成功完成！');
    }
    
    // 错误提示
    function showError() {
      CustomDialog.error('操作失败，请重试！');
    }
    
    // 信息提示
    function showInfo() {
      CustomDialog.info('这是一条提示信息');
    }
    
    // 警告提示
    function showWarning() {
      CustomDialog.warning('请注意，这是一个警告！');
    }
    
    // 自动关闭
    function showAutoClose() {
      var dialog = CustomDialog.info('此弹窗将在3秒后自动关闭');
      setTimeout(function() {
        dialog.close();
      }, 3000);
    }
  </script>
</body>
</html>